import { classNames } from "@/utils/utils";
import { useEffect, useState } from "react";
import { EDIT_TEXT_MODAL_TITLE } from "../../constants/constants";
import { TypeModal } from "../../constants/enums";
import GenericModal from "../../modals/genericModal";
import { Case } from "../../shared/components/caseComponent";
import { TextAreaComponentType } from "../../types/components";
import IconComponent from "../genericIconComponent";
import { Button } from "../ui/button";
import { Input } from "../ui/input";

export default function TextAreaComponent({
  value,
  onChange,
  disabled,
  editNode = false,
  id = "",
  password,
  updateVisibility,
}: TextAreaComponentType): JSX.Element {
  // Clear text area
  useEffect(() => {
    if (disabled && value !== "") {
      onChange("", undefined, true);
    }
  }, [disabled]);

  return (
    <div className={"flex w-full items-center" + (disabled ? "" : "")}>
      <div className="flex w-full items-center gap-3" data-testid={"div-" + id}>
        <Input
          id={id}
          data-testid={id}
          value={value}
          disabled={disabled}
          className={classNames(
            password !== undefined && password && value !== ""
              ? "text-clip password"
              : "",
            editNode ? "input-edit-node" : "",
            password != undefined ? "pr-8" : "",
            "w-full",
          )}
          placeholder={"Type something..."}
          onChange={(event) => {
            onChange(event.target.value);
          }}
        />
        <GenericModal
          changeVisibility={updateVisibility}
          type={TypeModal.TEXT}
          buttonText="Finish Editing"
          modalTitle={EDIT_TEXT_MODAL_TITLE}
          value={value}
          setValue={(value: string) => {
            onChange(value);
          }}
          disabled={disabled}
          password={password}
        >
          <div
            className={
              "flex items-center" + (password ? "relative left-6" : "")
            }
          >
            <Button unstyled>
              <IconComponent
                strokeWidth={1.5}
                id={id}
                name="ExternalLink"
                className={
                  "icons-parameters-comp shrink-0" +
                  (disabled ? " text-ring" : " hover:text-accent-foreground")
                }
              />
            </Button>
          </div>
        </GenericModal>
        {password !== undefined && (
          <Button
            unstyled
            tabIndex={-1}
            className={classNames(
              "mb-px text-muted-foreground hover:text-current",
              editNode
                ? "side-bar-button-size absolute bottom-[1.3rem] right-[4.2rem]"
                : "side-bar-button-size absolute bottom-4 right-[4.2rem]",
            )}
            onClick={(event) => {
              event.preventDefault();
              if (updateVisibility) updateVisibility();
            }}
          >
            {password ? (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
                />
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                />
              </svg>
            ) : (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
                />
              </svg>
            )}
          </Button>
        )}
      </div>
    </div>
  );
}
